<template>
  <div>
    <van-cell-group>
      <van-cell>
        <van-nav-bar title="机器人数据" >
          <template #right>
            <i class="el-icon-circle-plus-outline" @click="addRobot"/>
          </template>
        </van-nav-bar>
   
          <div v-for="item in  robotList" :key="item.uuid" class="sessionInfo" @click=" robotChatInfo(item)">
            <van-image class="robotImage" :src="item.imageUrl || 'https://img01.yzcdn.cn/vant/cat.jpeg'" />
            <div class="chatInfo" >
              <div class="robotNameTime">
                <div class="robotName">{{ item.robotName }}</div>
                <div class="chatTime"> {{ item.lastTime||'21:10' }}</div>
              </div>
              <span class="desc"> {{ item.desc }} </span>
            </div>
          </div>
      </van-cell>
    </van-cell-group>
    <PublicFooter></PublicFooter>
  </div>
</template>

<script>
import { findRobots } from '@/api/user/robotInfo'
import PublicFooter from '@/components/PublicFooter'
export default {
  name: 'Chat',
  data() {
    return {
      robotList: []
    }
  },
  components: {
    PublicFooter
  },
  created() {
    this.findRobotList()
  },
  computed: {},
  methods: {
    async findRobotList() {
      const { data } = await findRobots()
      console.log('findRobotList', data)
      this.robotList = data.data

    },
    robotChatInfo(item) {
      var type = item.robotType
      console.log('robotChatInfo', item)
      this.$router.push({
        name: type === 1 ?'chatInfo':  'imageInfo',
        params: {
          robotId: item.uuid,
          robotName: item.robotName
        }
      })
    },
    addRobot () {
      console.log('addRobot')
      this.$router.push({
        name: 'addRobot'
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.van-nav-bar {
  background-color: aliceblue;
 
}
.robotNameTime {
  display: flex;
   justify-content: space-between;
  flex-direction: row;
  width: 300px;
}
.chatTime {
  width: 40px;
 
}
.van-cell {
  padding: 0;
}
.robotName {
  font-size: large;
  font-weight: 500;
}

.sessionInfo {
  display: flex;
}

.chatInfo {
  display: flex;
  flex-direction: column;
  margin-left: 10px;

  .desc {
    font-size: small;
  }
}

.robotImage {
  width: 48px;
  height: 48px;
  border-radius: 2px;
  overflow: hidden;
}

.robotImage .van-image {
  border-radius: 10px;
}
::v-deep .van-nav-bar__right {
  font-size: 20px;
}
</style>
